<template>
	<el-container>
    <el-header height="80px">
      <div class="logo">
        <h1>卓克艺术网采集中心</h1>
      </div>
    </el-header>
    <el-main>
      <el-row :gutter="20" >
        <el-col :span="16" :offset="4">
          <div class="login">
            <h1 class="title">规则</h1>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="collect_id" :prop="collect_id">
                <el-select v-model="form.collect_id" @blur="saveData" class="m-2" placeholder="Select" size="large">
                  <el-option
                    v-for="item in collect"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="拍卖地址" prop="url" >
                <el-input v-model="form.url"  @blur="saveData"></el-input>
              </el-form-item>
              <template v-for="(item, key) in form" >
              <el-form-item :label="key" :prop="key"  v-if="key != 'collect_id' && key != 'url'">
                <el-input v-model="form[key]"  @blur="saveData"></el-input>
              </el-form-item>
              </template>
              <el-form-item>
                <el-button type="primary" @click="onSubmitTest('form')">TEST</el-button>
                <el-button type="primary" @click="changeJson">TO JSON</el-button>
                <el-button type="primary" @click="onSubmit('form')">SAVE</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <el-drawer
          v-model="show"
          title="结果"
          direction="rtl"
          size="80%"
        >
          
              <template v-for="(item, key) in result" >
              <el-form-item :label="key" :prop="key">
                {{item}}
              </el-form-item>
              </template>
        </el-drawer>
    </el-main>
    <el-footer>
      <p class="footer">主办：安徽柏兰德文化传播有限公司   技术：final</p>
    </el-footer>
    </el-container>

</template>
<script>
  import Api from '@/api/index'
  import { setToken } from '@/utils/auth'
  import { setCache, getCache } from '@/utils/cache'
  import { setUser } from '@/utils/user'
  import ApiLocal from '@/api/local'

	export default {
  name: 'TestRule',
  data() {
    return {
      height:'200px',
      form: {
      },
      collect: [],
      show: false,
      rules: {
      },
      result: {}
    }
  },
  props: {
    num: {
      default: 0
    },
    info: {
      default: function () {
        return []
      }
    }
  },
  watch: {
    
  },
  created() {
    this.getInit()
    ApiLocal.getRule({}).then(res=> {
      var form = {}, rules = {}
      for(var i in res.list){
        form[res.list[i]] = ''
        rules[res.list[i]] = [
          { required: true, message: '请输入参数', trigger: 'blur' }
        ]
      }
      form.collect_id = 0
      form.url = ''
      this.form = form
      this.rules = rules

      var s = getCache('__form__')
      if(s) this.form = JSON.parse(s)
    })
    this.collect = (getCache('collect'))
    // this.getConfig()
  },
  mounted() {
    this.height = (window.innerHeight - 180 ) + 'px'
  },
  methods: {
    onSubmitTest(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            ApiLocal.testRule({form: this.form}).then(res=> {
              this.result = res.list
              this.show = true
            })
          } else {
            console.log('error submit!!');
            return false;
          }
      })
    },
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            Api.collectSaveConfig(this.form).then(res=> {
              console.log(res)
              this.$message({
                message: '保存成功！',
                type: 'success',
                onClose: r => {}
              })
              
            })
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    changeJson(){
      var s = JSON.stringify(this.form)
      this.$messageBox.alert(s, 'JSON', {
        confirmButtonText: 'OK',
        callback: (action) => {
        },
      })
    },
    saveData(e){
      var s = JSON.stringify(this.form)
      setCache('__form__', s)
    },
    getInit(){
      Api.index().then(res=> {
        setCache('collect', res.collect)
      })
      ApiLocal.updateCollectConfig({})
    }
  }

};

</script>
<style>
.el-message-box__message p{
  word-wrap: break-word;
}
</style>
<style type="text/css" scoped>
.el-select{
  width: 100%;
}
.el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
.el-main{
  background-color: #cfe2ff;
}


.login{
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.title{
  text-align: center;
  margin: 20px;
  color: #1680ff;
}
.captchas{
  border-radius: 2px;
  margin-top: 6px;
}
.footer{font-size: 16px; text-align: center;}
</style>